<template>
  <div>
    <el-form >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :data="formFileds">
            <el-input v-model="formFileds.text"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" @click="search()">
              查询
            </el-button>
            <!-- <el-button type="primary">
              清空
            </el-button> -->
            <el-button type="primary" @click="add()">
              增加
            </el-button>
            <el-button type="danger" @click="deleteAll()">
              批量删除
            </el-button>
            <el-button type="success" @click="connection()">
              关联
            </el-button>
            <el-button type="success" @click="disConnection()">
              取消关联
            </el-button>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    

    <!--表格内容-->
    <el-table
      ref="objectList"
      :data="tableData"
      style="width: 100%; margin-bottom: 5px"
      border
      stripe
      highlight-current-row
      @row-click="handleRowClick"
      @select-all="handleCheckedAllAndCheckedNone"
      @select="handleCheckedAllAndCheckedNone"
      :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}"
      :span-method="objectSpanMethod"
    >
      <el-table-column fixed property="pmhbh" label="拍卖会编号" width="110">
      </el-table-column>
      <el-table-column fixed type="selection" width="45" align="center">
      </el-table-column>
      <el-table-column fixed property="bdbh" label="标的编号" width="100">
      </el-table-column>
      <el-table-column property="bdmc" label="标的名称" width="100">
      </el-table-column>
      <el-table-column property="bdlx" label="标的类型" width="80">
      </el-table-column>
      <el-table-column property="wtflx" label="委托方类型" width="100">
      </el-table-column>
      <el-table-column property="pmxs" label="拍卖形式" width="80">
      </el-table-column>
      <el-table-column property="qpj" label="起拍价" width="80">
      </el-table-column>
      <el-table-column property="cjj" label="成交价" width="80">
      </el-table-column>
      <el-table-column property="pgj" label="评估价" width="80">
      </el-table-column>
      <el-table-column property="bzj" label="保证金" width="80">
      </el-table-column>
      <el-table-column property="blj" label="保留价" width="80">
      </el-table-column>
      <el-table-column property="bmxz" label="报名限制" width="80">
      </el-table-column>
      <el-table-column property="pmhmc" label="所属拍卖会" width="100">
      </el-table-column>
      <el-table-column property="fbzt" label="发布状态" width="80">
      </el-table-column>
      <el-table-column property="pmzt" label="拍卖状态" width="80">
      </el-table-column>
      <el-table-column property="hpzt" label="悔拍状态" width="80">
      </el-table-column>

      <el-table-column property="czsj" label="操作时间" width="200">
      </el-table-column>
      <el-table-column property="jnfs" label="缴纳方式" width="80">
      </el-table-column>
      
      <el-table-column label="审核发票信息" width="120">
        <template>
          <el-button type="success" size="mini" @click="invoiceInfo()">审核</el-button>
        </template>
      </el-table-column>
      <el-table-column label="生成成交确认书" width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" autofocus @click="pdf(scope.row)">生成确认书</el-button>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-dropdown @command="handleCommand" v-if="scope.row.fbzt == '待提交'">
            <el-button type="primary">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="beforeHandleCommand('info',scope.row)">成交信息</el-dropdown-item>
              <!-- <el-dropdown-item>悔拍</el-dropdown-item> -->
              <el-dropdown-item :command="beforeHandleCommand('rowEdit',scope.row)">编辑</el-dropdown-item>
              <el-dropdown-item :command="beforeHandleCommand('rowDel',scope.row)">删除</el-dropdown-item>
              <el-dropdown-item :command="beforeHandleCommand('up',scope.row)">上架</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          
          <el-button v-else type="danger" @click="down(scope.row)">下架</el-button>

        </template>
      </el-table-column>


    </el-table>
    <!--分页-->
    <el-pagination :page-sizes="[10, 20, 30, 40, 100]" :page-size=this.pageSize :total=this.total :current-page="currentPage" 
    layout="total, sizes, prev, pager, next, jumper" @current-change="getCurrentPage" @size-change="getSize">
    </el-pagination>

    <Edit v-if="isShowEditDialog" :isShowEditDialog="isShowEditDialog"
      @dialogClose="dialogClose" :rowData="rowData"></Edit>
    <Add v-if="isShowAddDialog" :isShowAddDialog="isShowAddDialog"  @dialogClose="dialogClose"></Add>
    <Info v-if="isShowObjectInfo" :isShowObjectInfo="isShowObjectInfo"  @dialogClose="dialogClose"></Info>
    <Examine v-if="isShowInvoiceInfo" :isShowInvoiceInfo="isShowInvoiceInfo"  @dialogClose="dialogClose"></Examine>
  </div>
</template>
    
  <script>
  import Edit from "./objectEdit.vue";
  import Add from "./objectAdd.vue";
  import Info from "./objectInfo.vue";
  import Examine from "./examineInvoice.vue";
  import { getAll,getDataBy,delData,createPDF,submit,shelves,getAllLot,getLotByPmhbh,delAll,connect,disConnect } from "@/api/auctionManage/objectManage";
  export default {
  name: "Table",
  components: {
    Edit,
    Add,
    Info,
    Examine
  },
  data() {
    return {
      pageSize: 10,
      total: 0,
      currentPage: 1,
      param: '',
      formFileds: {
        text: '',
        param: {}
      },
      tableData: [
        {
          "id": 7,
          "bdbh": "",//标的编号
          "bdmc": "",//标的名称
          "bdlx": "",//标的类型
          "wtflx": "",//委托方类型
          "pmxs": '',//拍卖形式
          "qpj": '',//起拍价
          "cjj": '',//成交价
          "pgj": '',//评估价
          "bzj": '',//保证金
          "blj": '',//保留价
          "bmxz": '',//报名限制
          "pmhbh": "",//拍卖会编号
          "pmhmc": '',//拍卖会名称
          "pmhlx": '',//拍卖会类型
          "fbzt": '',//发布状态
          "pmzt": '',//拍卖状态
          "hpzt": '',//悔拍状态
          "czsj": '',//操作时间
          "jnfs": '',//缴纳方式
          "szd": '',//所在地
          "xxdz": '',//详细地址
          "zxr": '',//咨询人
          "zxlxfs": '',//咨询联系方式
          "ssfl": '',//所属分类
          "ejfl": '',//二级分类
          "vrljdz": '',//vr链接地址
          "pmfs": '',//拍卖方式
          "jjfd": '',//加价幅度
          "zyjjsj": '',//自由竞价时间
          "xsjjsj": '',//限时竞价时间
          "ysjjsj": '',//延时竞价时间
          "sfxg": '',//是否限购
          "sfdk": '',//是否支持贷款
          "sfsqyj": '',//是否收取佣金
          "sqyjfs": '',//收取佣金方式
          "gdbl": '',//固定比例
          "yjsx": '',//佣金上限
          "qjblxx": '',//区间比例下限
          "qjblsx": '',//区间比例上限
          "gdje": '',//固定金额
          "bdjs": '',//标的介绍
          "bdjst": '',//标的介绍图
          "zyts": '',//重要提示
          "bz": '',//备注
          "sctp": '',//上传图片
          "scsp": '',//上传视频
          "scfj": '',//上传附件
          "yj": '',//佣金
          "zjhm": '',//证件号码
          "zjlx": '',//证件类型
          "jmrxm": '',//竞买人姓名
          "jmrhp": '',//竞买人号牌
          "cjbz": '',//成交备注
          "pmgg": '',//拍卖公告
          "jmxz": '',//竞买须知
          "wgs": '',//围观数
          "sx": '',//顺序
          "deleteflag": false
        }
      ],
      isShowEditDialog: false,
      isShowAddDialog: false,
      isShowObjectInfo: false,
      isShowInvoiceInfo: false,
      rowData:{},
      pmhbh: [],
      selection: [],
      lots: [],
      lotsList: [],
      span: [],
      index: '',
    }

  },
  methods: {
    handleRowClick(row, event, column) {
      // 仅选中当前行
      this.setCurRowChecked(row);
      console.log('row',row);
      // console.log('pmhbh',row.pmhbh);
    },
    handleCheckedAllAndCheckedNone(selection) {
      // 当前选中仅一行时操作-（当前表格行高亮）
      1 != selection.length && this.$refs.objectList.setCurrentRow();
      console.log('selection',selection);
      this.selection = selection;
    },
    dialogClose() {
      this.isShowEditDialog = false;
      this.isShowAddDialog = false;
      this.isShowObjectInfo = false;
      this.isShowInvoiceInfo = false;
      this.getList();
    },
    
    add(){
      this.isShowAddDialog = true;
    },
    info(){
      // this.$message.warning('该功能正在开发');
      // return ;
      this.isShowObjectInfo = true;
    },
    invoiceInfo(){
      this.isShowInvoiceInfo = true;
    },
    rowEdit(row) {
      // //当前选中行
      this.rowData = row;
      this.isShowEditDialog = true;
    },
    handleCommand(command){
      if(command.command == 'rowEdit'){
        this.rowEdit(command.row);
      }
      else if(command.command == 'rowDel'){
        this.rowDel(command.row);
      }
      else if(command.command == 'up'){
        this.up(command.row);
      }
      else if(command.command == 'info'){
        this.info();
      }
    },
    beforeHandleCommand(command,row){
      return{
        'command': command,
        'row': row
      }
    },
    rowDel(row) {
      // 让当前删除按钮失焦
      // event.target.blur();
      this.$confirm("确定要删除当前行吗？", "删除", {
        comfirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        delData(row.id).then((res) => {
          if(res){
            console.log(row.id);
            this.tableData.splice(row.id, 1);
            this.$message.success("删除成功");
            this.getList();
          }
        })
      });
    },
    deleteAll() {
      if(this.selection.length == 0){
        this.$message.warning('请选择至少一项');
      }
      else{
        this.$confirm("确定要删除这些行吗？", "删除", {
          comfirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          let datas = '';
          let data = '';
          for(let item in this.selection){
            if(item == this.selection.length-1){
              data = 'id=' + this.selection[item].id;
            }
            else{
              data = 'id=' + this.selection[item].id + '&';
            }
            datas += data;
          }
          delAll(datas).then((res) => {
            console.log(res);
            if(res.data == true){
              this.$message.success("删除成功");
              this.getList();
            }
          })
        });
      }
    },
    // 选中当前行-当前行的复选框被勾选
    setCurRowChecked(row) {
      // this.$refs.objectList.clearSelection();
      // this.$refs.objectList.toggleRowSelection(row);
    },
    getCurrentPage(currentPage){
      console.log(currentPage);
      this.currentPage = currentPage;
      if(this.formFileds.text){
        this.search();
      }
      else{
        this.getList();
      }
      
    },
    getSize(pageSize){
      console.log(pageSize);
      this.pageSize = pageSize;
      if(this.formFileds.text){
        this.search();
      }
      else{
        this.getList();
      }
    },
    getList(){
      this.param = 'pageno=' + this.currentPage + '&countonepage=' + this.pageSize;
      getAll(this.param).then((res) => {
        if(res){
          this.total = res.data.total;
          this.tableData = res.data.list;
          console.log('getList',this.tableData);
          this.formatData(this.tableData);
        }
      })
    },
    // getLotList(){
    //   getAllLot().then((res) => {
    //     if(res){
    //       console.log('标的列表',res.data.list);
    //       this.lotsList = res.data.list;
    //       this.formatData(this.lotsList);

    //       // for(let item of res.data.list){
    //       //   console.log('拍卖会编号',item.pmhbh);
    //       //   if(!this.pmhbh.includes(item.pmhbh)){
    //       //     this.pmhbh.push(item.pmhbh);
    //       //     getLotByPmhbh(item.pmhbh).then((res2) => {
    //       //       for(let item2 of res2.data){
    //       //         this.lots.push(item2);
    //       //       }
    //       //     })
    //       //   }
    //       // }
    //       // console.log('拍卖会',this.pmhbh);
    //       // console.log('标的',this.lots);
    //     }
    //   })
    // },
    formatData(data){
      this.span = [];
      // data就是我们从后台拿到的数据
      for (let i = 0; i < data.length; i++) {
        if (i == 0) {
          this.span.push(1);
          this.index = 0;
        } 
        else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].pmhbh == data[i - 1].pmhbh) {
            this.span[this.index] += 1;
            this.span.push(0);
          } 
          else {
            this.span.push(1);
            this.index = i;
          }
        }
      }
      // console.log('span',this.span);
    },
    search(){
      if(!this.formFileds.text){
        this.getList();
        return ;
      }
      this.formFileds.param = 'pageno=' + this.currentPage + '&countonepage=' + this.pageSize + '&input=' + this.formFileds.text;
      console.log(this.formFileds.param);
      getDataBy(this.formFileds.param).then((res) => {
        if(res){
          console.log(res);
          this.total = res.data.total;
          this.tableData = res.data.list;
        }
      })
    },
    pdf(row){
      let data = 'bdbh=' + row.bdbh;
      createPDF(data).then((res) => {
        if(res){
          window.open(res.data);
        }
      })
    },
    up(row){
      let data = 'id=' + row.id;
      submit(data).then((res) => {
        if(res){
          console.log(res);
          this.$message.success('上架成功');
          this.getList();
        }
      })
    },
    down(row){
      let data = 'id=' + row.id;
      shelves(data).then((res) => {
        if(res){
          console.log(res);
          this.$message.success('下架成功');
          this.getList();
        }
      })
    },
    connection(){
      let pmhbh = [];
      let pph = [];
      if(this.selection.length <= 1){
        this.$message.warning('请选择至少两个标的！');
        return ;
      }
      for(let item of this.selection){
        if(!pmhbh.includes(item.pmhbh)){
          pmhbh.push(item.pmhbh);
        }
      }
      if(pmhbh.length >= 2){
        this.$message.warning('请选择同一个拍卖会的标的！');
        return ;
      }
      else{
        let datas = '';
        let data = '';
        for(let item of this.selection){
          data = 'id=' + item.id + '&';
          datas += data;
          if(!pph.includes(item.pph)){
            pph.push(item.pph);
          }
        }
        console.log('pph',pph);
        if(pph.length == 1){
          this.$message.warning('标的已经关联过了');
          return ;
        }
        let pphMin = Math.min(...pph);
        // console.log('min',pphMin);
        datas += 'pph=' + pphMin;
        // console.log(datas);
        connect(datas).then((res) => {
          if(res){
            this.$message.success('关联成功');
            this.getList();
          }
        })
      }
    },
    disConnection(){
      let pmhbh = [];
      let pph = [];
      if(this.selection.length <= 1){
        this.$message.warning('请选择至少两个标的');
        return ;
      }
      for(let item of this.selection){
        pph.push(item.pph);
        if(!pmhbh.includes(item.pmhbh)){
          pmhbh.push(item.pmhbh);
        }
      }
      if(pmhbh.length >= 2){
        this.$message.warning('请选择同一个拍卖会的标的');
        return ;
      }
      else{
        let datas = '';
        let data = '';
        for(let item in this.selection){
          if(item == this.selection.length-1){
            data = 'id=' + this.selection[item].id;
          }
          else{
            data = 'id=' + this.selection[item].id + '&';
          }
          datas += data;
          if(!pph.includes(this.selection[item].pph)){
            pph.push(this.selection[item].pph);
          }
        }
        
        // if(pph.length > 1){
        //   this.$message.success('标的没有关联');
        //   return ;
        // }
        disConnect(datas).then((res) => {
          if(res){
            this.$message.success('取消关联成功');
            this.getList();
          }
        })
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let _row = this.span[rowIndex];
        // console.log('rowIndex',rowIndex);
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: 1
        };
      }
      // else {
      //   return {
      //     rowspan: 1,
      //     colspan: 1
      //   };
      // }
    },
  },

  mounted(){
    this.getList();
    // this.getLotList();
  }
};
</script>
    
  <style scoped lang="less">
  .el-form {
    padding: 0 10px;
  }

  .el-date-editor {
    width: 100% !important;
  }
  </style>
    